<template>
    <div class="notice" :class="type">
      <t-icon class="t-m-l-10" icon="iconlaba" :color="color" :size="iconSize" ></t-icon>
      <div :class="['notice-message']">
        <el-carousel
          height="23px"
          :direction="direction"
          indicator-position="none"
          :autoplay="interval"
          arrow="never"
          @change="change"
        >
          <el-carousel-item  v-for="(item,index) in list" :key="index">
            <div
              :class="type"
              @click="clickMessage(item,index)"
              class="notice-message-text"
              :title="item[nameKey]"
            >{{item[nameKey]}}</div>
          </el-carousel-item>
        </el-carousel>
         <div class="hover-class" @click="viewMore">
           查看更多
           <i class="el-icon-arrow-right"></i>
         </div>
      </div>
    </div>
</template>
<script>
export default {
  props: {
    iconSize: {
      type: Number,
      default:20,
    },
    iconColor:{
      type:String,
      defualt:""
    },
    type: {
      type: String,
      default: "info",
    },
    direction: {
      type: String,
      default: "vertical", //horizontal
    },
    interval: {
      type: [Boolean],
      default: true,
    },
    list: {
      type: Array,
      default: [],
    },
    nameKey: {
      type: String,
      default: "value",
    },
  },
  computed:{
    color(){
      let colorConfig = {
        primary:"#547CEC",
        success:"#19be6b",
        warning:"#FF9900",
        danger:"#FB1010",
        info:"#909399"
      }
      if(this.iconColor){
        return colorConfig[this.iconColor]
      }else{
        return colorConfig[this.type]
      }
    }
  },
  data() {
    return {
      colorConfig : {
        primary:"#547CEC",
        success:"#19be6b",
        warning:"#FF9900",
        danger:"#FB1010",
        info:"#909399"
      }
    };
  },
  methods: {
    change(e) {
      this.$emit("change", e);
    },
    clickMessage(e, i) {
      this.$emit("click", {
        detail: e,
        index: i,
      });
    },
    viewMore(){
      this.$emit("more");
    }
  },
};
</script>
<style lang="scss" scoped>
p {
  margin: 0;
}
.primary {
  color: #409eff;
  background: #d9ecff;
}

.success {
  color: $type-success;
  background: #e1f3d8;
}
.warning {
  color: $type-warning;
  background: #faecd8;
}
.danger {
  color: $type-error;
  background: #fde2e2;
}
.info{
  color:#333;
  background:#fff
}
.primary-icon {
  color: $type-primary;
}
.success-icon {
  color: $type-success;
}
.warning-icon {
  color: $type-warning;
}
.danger-icon {
  color: $type-error;
}
.info-icon{
  color:$type-info
}
.notice {
  display: flex;
  align-items: center;
  border-radius: 5px;
  height: 40px;
  width: 100%;
  .notice-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 10px;
    width: 100%;
    .notice-message-text {
      cursor: pointer;
      padding-right: 10px;
      width: 400px;
      @include text-overflow(1);
      
    }
    .notice-more{
      cursor: pointer;
      margin-right: 10px;
    }
  }
  /deep/.el-carousel__item{
    display: flex;
    align-items: center;
  }
  /deep/.el-carousel{
    width: 500px;
  }
}
</style>
